<template>
	<el-tabs v-model="queryParams.tab_check_status" @tab-change="handleChange">
		<template v-for="(item,i) in tabList" :key="'tabList'+i">
			<el-tab-pane :label="item.name" :name="item.name">
                <div v-if="queryParams.tab_check_status=='全部'" class="article-lists">
                    <el-card class="!border-none" shadow="never">
						<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
							<el-form-item label="举报时间">
								<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
							</el-form-item>
                            <el-form-item label="举报对象">
								<el-input class="w-[280px]" v-model="queryParams.to_real_name" clearable />
							</el-form-item>
							<el-form-item label="举报人">
								<el-input class="w-[280px]" v-model="queryParams.from_real_name" clearable />
							</el-form-item>
                            <el-form-item label="处理人">
								<el-input class="w-[280px]" v-model="queryParams.ad_name" clearable />
							</el-form-item>
                            <el-form-item label="举报理由">
								<el-select class="w-80" v-model="queryParams.type" placeholder="请选择" clearable filterable>
									<el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
								</el-select>
							</el-form-item>
                            <el-form-item label="举报成立">
								<el-select class="w-80" v-model="queryParams.establish" @change="handleEstablishChange" placeholder="请选择" clearable filterable>
                                    <el-option label="全部" value="" />
                                    <el-option label="成立" :value="1" />
                                    <el-option label="不成立" :value="2" />
								</el-select>
							</el-form-item>
                            <el-form-item label="处理状态">
								<el-select class="w-80" v-model="queryParams.handle" @change="handleSelectChange" placeholder="请选择" clearable filterable>
                                    <el-option label="全部" value="" />
                                    <el-option label="处理中" :value="1" />
                                    <el-option label="已处理" :value="2" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="resetPage">查询</el-button>
								<el-button @click="resetParams">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
                    <el-card class="!border-none" shadow="never"> 
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号" type="index" min-width="80" :index="indexAdd" />
							<el-table-column label="举报对象" min-width="100" prop="to_real_name"/>
                            <el-table-column label="举报理由" min-width="180" prop="type">
								<template #default="{ row }">
									<span>{{ typeTxt(row.type) }}</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报描述" min-width="360" prop="desc">
								<template #default="{ row }">
									<div class="content">{{ row.desc }}</div>
								</template>
							</el-table-column>
                            <el-table-column label="图片" min-width="160" prop="attach_urls">
                                <template #default="{ row }">
                                    <div class="flex align-middle">
                                        <el-image v-if="row.attach_urls.length != 0" style="width: 58px; height: 58px"
                                                :src="row.attach_urls[0]"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2" 
                                                fit="contain"
                                                :preview-teleported="true"
                                                :preview-src-list="row.attach_urls.slice(0,1)"></el-image>
                                        <div v-if="row.attach_urls.length > 1" style="line-height: 58px;padding-left: 10px;">...</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="举报人" min-width="100" prop="from_real_name"/>
                            <el-table-column label="举报时间" min-width="180" prop="create_time"/>
                            <el-table-column label="处理状态" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">未处理</span>
									<span v-else>已处理</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报成立" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">-</span>
									<span v-else-if="row.status == 1">成立</span>
									<span v-else>不成立</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理人" min-width="100" prop="ad_name">
								<template #default="{ row }">
									<span>{{ row.ad_name || '-'}}</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理时间" min-width="180" prop="check_time">
								<template #default="{ row }">
									<span>{{ row.check_time || '-'}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" fixed="right">
								<template #default="{ row }">
                                    <router-link
                                        v-perms="['user.user/chatAccusationDetail']"
                                        :to="{ path: getRoutePath('user.user/chatAccusationDetail'), query: { id: row.id } }"
                                    >
                                        <el-link v-perms="['user.user/chatAccusationDetail']" type="primary">查看</el-link>
                                    </router-link>
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
                </div>
				<div v-if="queryParams.tab_check_status=='待处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
							<el-form-item label="举报时间">
								<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
							</el-form-item>
                            <el-form-item label="举报对象">
								<el-input class="w-[280px]" v-model="queryParams.to_real_name" clearable />
							</el-form-item>
							<el-form-item label="举报人">
								<el-input class="w-[280px]" v-model="queryParams.from_real_name" clearable />
							</el-form-item>
                            <el-form-item label="举报理由">
								<el-select class="w-80" v-model="queryParams.type" placeholder="请选择" clearable filterable>
									<el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="resetPage">查询</el-button>
								<el-button @click="resetParams">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card class="!border-none" shadow="never"> 
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号" type="index" min-width="80" :index="indexAdd" />
							<el-table-column label="举报对象" min-width="100" prop="to_real_name"/>
                            <el-table-column label="举报理由" min-width="180" prop="type">
								<template #default="{ row }">
									<span>{{ typeTxt(row.type) }}</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报描述" min-width="360" prop="desc">
								<template #default="{ row }">
									<div class="content">{{ row.desc }}</div>
								</template>
							</el-table-column>
                            <el-table-column label="图片" min-width="160" prop="attach_urls">
                                <template #default="{ row }">
                                    <div class="flex align-middle">
                                        <el-image v-if="row.attach_urls.length != 0" style="width: 58px; height: 58px"
                                                :src="row.attach_urls[0]"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2" 
                                                fit="contain"
                                                :preview-teleported="true"
                                                :preview-src-list="row.attach_urls.slice(0,1)"></el-image>
                                        <div v-if="row.attach_urls.length > 1" style="line-height: 58px;padding-left: 10px;">...</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="举报人" min-width="100" prop="from_real_name"/>
                            <el-table-column label="举报时间" min-width="180" prop="create_time"/>
                            <el-table-column label="处理状态" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">未处理</span>
									<span v-else>已处理</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报成立" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">-</span>
									<span v-else-if="row.status == 1">成立</span>
									<span v-else>不成立</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理人" min-width="100" prop="ad_name">
								<template #default="{ row }">
									<span>{{ row.ad_name || '-'}}</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理时间" min-width="180" prop="check_time">
								<template #default="{ row }">
									<span>{{ row.check_time || '-'}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" fixed="right">
								<template #default="{ row }">
                                    <router-link
                                        v-perms="['user.user/chatAccusationDetail']"
                                        :to="{ path: getRoutePath('user.user/chatAccusationDetail'), query: { id: row.id } }"
                                    >
                                        <el-link v-perms="['user.user/chatEstablish', 'user.user/chatUnEstablish']" type="primary" :underline="false">审核</el-link>
                                    </router-link>
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
				<div v-if="queryParams.tab_check_status=='已处理'" class="article-lists">
					<el-card class="!border-none" shadow="never">
						<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
							<el-form-item label="举报时间">
								<daterange-picker v-model:startTime="queryParams.start_time" v-model:endTime="queryParams.end_time" />
							</el-form-item>
                            <el-form-item label="举报对象">
								<el-input class="w-[280px]" v-model="queryParams.to_real_name" clearable />
							</el-form-item>
							<el-form-item label="举报人">
								<el-input class="w-[280px]" v-model="queryParams.from_real_name" clearable />
							</el-form-item>
                            <el-form-item label="处理人">
								<el-input class="w-[280px]" v-model="queryParams.ad_name" clearable />
							</el-form-item>
                            <el-form-item label="举报理由">
								<el-select class="w-80" v-model="queryParams.type" placeholder="请选择" clearable filterable>
									<el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
								</el-select>
							</el-form-item>
                            <el-form-item label="举报成立">
								<el-select class="w-80" v-model="queryParams.establish" placeholder="请选择" clearable filterable>
									<el-option label="全部" :value="0" />
                                    <el-option label="成立" :value="1" />
                                    <el-option label="不成立" :value="2" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="resetPage">查询</el-button>
								<el-button @click="resetParams">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card class="!border-none" shadow="never"> 
						<el-table size="large" v-loading="pager.loading" :data="pager.lists">
							<el-table-column label="序号" type="index" min-width="80" :index="indexAdd" />
							<el-table-column label="举报对象" min-width="100" prop="to_real_name"/>
                            <el-table-column label="举报理由" min-width="180" prop="type">
								<template #default="{ row }">
									<span>{{ typeTxt(row.type) }}</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报描述" min-width="360" prop="desc">
								<template #default="{ row }">
									<div class="content">{{ row.desc }}</div>
								</template>
							</el-table-column>
                            <el-table-column label="图片" min-width="160" prop="attach_urls">
                                <template #default="{ row }">
                                    <div class="flex align-middle">
                                        <el-image v-if="row.attach_urls.length != 0" style="width: 58px; height: 58px"
                                                :src="row.attach_urls[0]"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2" 
                                                fit="contain"
                                                :preview-teleported="true"
                                                :preview-src-list="row.attach_urls.slice(0,1)"></el-image>
                                        <div v-if="row.attach_urls.length > 1" style="line-height: 58px;padding-left: 10px;">...</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="举报人" min-width="100" prop="from_real_name"/>
                            <el-table-column label="举报时间" min-width="180" prop="create_time"/>
                            <el-table-column label="处理状态" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">未处理</span>
									<span v-else>已处理</span>
								</template>
							</el-table-column>
                            <el-table-column label="举报成立" min-width="100" prop="status">
								<template #default="{ row }">
									<span v-if="row.status == 0">-</span>
									<span v-else-if="row.status == 1">成立</span>
									<span v-else>不成立</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理人" min-width="100" prop="ad_name">
								<template #default="{ row }">
									<span>{{ row.ad_name || '-'}}</span>
								</template>
							</el-table-column>
                            <el-table-column label="处理时间" min-width="180" prop="check_time">
								<template #default="{ row }">
									<span>{{ row.check_time || '-'}}</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" fixed="right">
								<template #default="{ row }">
                                    <router-link
                                        v-perms="['user.user/chatAccusationDetail']"
                                        :to="{ path: getRoutePath('user.user/chatAccusationDetail'), query: { id: row.id } }"
                                    >
                                        <el-link v-perms="['user.user/chatAccusationDetail']" type="primary">查看</el-link>
                                    </router-link>
								</template>
							</el-table-column>
						</el-table>
						<div class="flex justify-end mt-4">
							<pagination v-model="pager" @change="getLists" />
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</template>
	</el-tabs>
</template>
<script lang="ts" setup name="demandLists">
	import { chatAccusationLists } from '@/api/safe';
	import { usePaging } from '@/hooks/usePaging';
    import { getRoutePath } from '@/router'
	const tabList = ref([{ name: '全部', id: ['1', '2', '3'] }, { name: '待处理', id: ['0'] }, { name: '已处理', id: ['1', '2'] }]);
    const typeList = ref([
		{'name':'全部', value: 0},
		{'name':'发布不当内容或信息', value: 12},
		{'name':'传播色情资源、引导私下交易', value: 2},
		{'name':'未成年相关', value: 8},
		{'name':'冒充他人', value: 13},
		{'name':'涉嫌欺诈', value: 5},
		{'name':'危害人身安全', value: 9},
		{'name':'侵犯权益', value: 14},
		{'name':'网络暴力', value: 1},
		{'name':'其它', value: 11}]
	)
	const typeTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
            case 1: txt = '侮辱谩骂、网络暴力'; break;
            case 2: txt = '传播色情资源'; break;
            case 3: txt = '违法犯罪'; break;
            case 4: txt = '不实信息'; break;
            case 5: txt = '涉嫌欺诈'; break;
            case 6: txt = '政治敏感'; break;
            case 7: txt = '违规卖货、假冒商品'; break;
            case 8: txt = '未成年相关'; break;
            case 9: txt = '危害人身安全'; break;
            case 10: txt = '此账号可能被盗用了'; break;
            case 11: txt = '其他'; break;
            case 12: txt = '发布不当的内容和信息'; break;
            case 13: txt = '冒充他人'; break;
            case 14: txt = '侵犯权益'; break;
        }
			return txt;
		})
	}
	let queryParams:any = reactive({
		tab_check_status: '全部',
        status: [],
        start_time: '',
		end_time: '',
        to_real_name: '',
        from_real_name: '',
        ad_name: '',
		establish: '',
        establishArr: [], // 举报成立
		handle: '',
        handleArr: [], //处理状态
        type: ''
        
	});
	let optionsData = reactive({
		tab_check_status_arr_list: [
			{name:'全部',id:0},
			{name:'审核通过',id:1},
			{name:'审核驳回',id:2},
		]
	});
	
	onMounted(async () => {
		getLists();
	});
	
	// tab切换请求
	const handleChange = (val : any) => {
		queryParams.status = val == '全部' ? ['0', '1', '2'] : val == '待处理' ? ['0'] : val == '已处理' ? ['1', '2'] : [];
		getLists();
	}

	//数组去重
	const unique = (arr: any[]) => {
			return arr.filter(function(item, index, arr) {
			//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
			return arr.indexOf(item, 0) === index;
		});
	}

	// 举报是否成立
	const handleEstablishChange = (val:any) => {
		console.log(val)
		let arr: number[] = []
		if (val == 1) {
			arr = [1]
		} else if (val == 2) {
			arr = [2]
		}
		queryParams.establishArr = arr
		queryParams.status = unique(arr.concat(queryParams.handleArr))
	}
	// 处理中/已处理
    const handleSelectChange = (val:any) => {
		console.log(val)
		let arr: number[] = []
		if (val == 1) {
			arr = [0]
		} else if (val == 2) {
			arr = [1,2]
		}
		queryParams.handleArr = arr
		queryParams.status = unique(arr.concat(queryParams.establishArr))
    }

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: chatAccusationLists,
		params: queryParams
	})

</script>
<style lang="scss" scoped>
.content{
    width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>